<template>
  <!-- showResult 结局页面 -->
  <div class="result">
    <div class="cycle-bg">
      <img class="cycle-img" src="/static/cycle-bg.png" alt="">
      <div class="rect rect-1" :class="{hideAnimate:step2}" @animationend="step3=true"></div>
      <div class="rect rect-2" :class="{hideAnimate:step3}" @animationend="step4=true"></div>
      <div class="rect rect-3" :class="{hideAnimate:step4}" @animationend="getResult"></div>
      <div class="rect rect-4" :class="{hideAnimate:startAnimate}" @animationend="step2=true"></div>
      <!-- 成功失败平局处理 -->
      <img class="word-sh" :class="{shActive:resultType=='胜利'}" src="/static/sheng.png" @transitionend="showGift=true;">
      <img class="word-l" :class="{lActive:resultType=='胜利'}" src="/static/li.png">
      <!-- 连胜 -->
      <!-- <div class="cv" :class="{cvActiv:showCv&&resultType=='胜利'}" @transitionend="showCv2=true">
        <img src="/static/fire.png" alt="">
        <div class="cv-number">{{cw}}</div>
      </div> -->
      <!-- <img class="cv2" :class="{cv2Activ:showCv2&&resultType=='胜利'}" src="/static/liansheng.png" @transitionend="showGift=true"> -->
      <!-- 平局 -->
      <img class="word-p" :class="{pActive:resultType=='平局'}" src="/static/ping.png" @transitionend="showGift=true">
      <img class="word-j" :class="{jActive:resultType=='平局'}" src="/static/ju.png">

      <!--失败 -->
      <img class="word-s" :class="{pActive:resultType=='失败'}" src="/static/shi.png" @transitionend="showGift=true">
      <img class="word-b" :class="{bActive:resultType=='失败'}" src="/static/bai.png">
    </div>
    <div class="gift" :class="{giftActive:showGift}" @transitionend="showGiftDetail=true">
      <div class="line"></div>
      <div class="g-word">奖励</div>
      <div class="line"></div>
    </div>
    <div class="gift-detail" :class="{giftDetailActive:showGiftDetail}" @transitionend="showBtn=true">
      <div class="gold">
        <img src="/static/gold.png" alt=""> +0
      </div>
      <div class="exp">
        <img src="/static/exp.png" alt=""> +0
      </div>
    </div>

    <div class="btn-box">
      <div v-if="identity==2" class="btn-game green" :class="{btnActive:showBtn}" @click="startMyGame">
        自己开一局
      </div>
      <div v-else class="btn-game green" :class="{btnActive:showBtn}" @click="reStart">
        再玩一局
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:["myScore","otherScore","startAnimate","identity"],
  data() {
    return {
      //结果动画
      audio:null,
      cw:0,
      resultType:"",
      rectList: [true, true, true, true],
      showCycle: false,
      step2: false,
      step3: false,
      step4: false,
      showCv2: false,
      showGift: false,
      showGiftDetail: false,
      showBtn:false,
    };
  },
  methods:{
    getResult() {
      // if (this.questionIndex == 4) {
      if (this.myScore.score > this.otherScore.score || this.oRun) {
        // this.setCw(this.cw);

        this.resultType = "胜利";
        if(this.identity==1){
          this.resultType = "失败";
        }
      } else if (this.myScore.score < this.otherScore.score) {
        this.resultType = "失败";
        if(this.identity==1){
          this.resultType = "胜利";
        }
      } else if (
        this.myScore.score == this.otherScore.score 
      ) {
        this.resultType = "平局";
      }
      if(this.resultType=="胜利"){
        this.audio.play();
      }
      // }
    },
    initAudio() {
      this.audio = wx.createInnerAudioContext();
      this.audio.src = "/static/audio/victory.mp3";
    },
    startMyGame(){
      this.$emit("btnClickTwo");
    },
    reStart(){
      this.$emit("btnClickOne");
    },
  },
  mounted(){
    this.initAudio();
  },
};
</script>

<style lang="scss" scoped>
.cycle-bg {
  position: relative;
  text-align: center;
  margin-bottom: 100rpx;
  .cycle-img {
    margin: 0 auto;
    width: 299rpx;
    height: 278rpx;
  }
  .rect {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    opacity: 1;
    width: 150rpx;
    height: 150rpx;
  }
  .rect-1 {
    transform: translate(-100%, -100%);
  }
  .rect-2 {
    transform: translate(0, -100%);
  }
  .rect-3 {
    transform: translate(0, 0);
  }
  .rect-4 {
    transform: translate(-100%, 0);
  }
  .hideAnimate {
    animation: show 0.01s ease forwards;
  } // 成功
}

@keyframes show {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

// 文字
.word-sh {
  position: absolute;
  width: 212rpx;
  height: 179rpx;
  top: -30rpx;
  right: 50%;
  transform: translateX(-750rpx);
  transition: all 0.2s ease;
}

.word-l {
  position: absolute;
  width: 197rpx;
  height: 186rpx;
  bottom: -30rpx;
  left: 50%;
  transition: all 0.2s ease;
  transform: translateX(750rpx);
}

.shActive {
  transform: translateX(60rpx);
}

.lActive {
  transform: translateX(-30rpx);
}

.cv {
  position: absolute;
  top: -50rpx;
  left: 50%;
  transform: translateX(50rpx) scale(1.3);
  opacity: 0;
  transition: all 0.2s ease;
  img {
    width: 109rpx;
    height: 120rpx;
  }
  .cv-number {
    font-size: 50rpx;
    font-weight: bold;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -75%);
  }
}

.cvActiv {
  transform: translateX(50rpx) scale(1);
  opacity: 1;
}

.cv2 {
  position: absolute;
  width: 43rpx;
  height: 85rpx;
  top: 50rpx;
  left: 50%;
  transform: translateX(170rpx) scale(1.3);
  opacity: 0;
  transition: all 0.2s ease;
}

.cv2Activ {
  transform: translateX(170rpx) scale(1);
  opacity: 1;
}

.word-p {
  position: absolute;
  width: 154rpx;
  height: 181rpx;
  top: -50rpx;
  right: 45%;
  transform: translate(-30rpx, 30rpx);
  opacity: 0;
  transition: all 0.2s ease;
}

.word-j {
  position: absolute;
  width: 195rpx;
  height: 201rpx;
  left: 45%;
  transition: all 0.2s ease;
  transform: translate(30rpx, -30rpx);
  opacity: 0;
  bottom: 0;
}

.word-s {
  position: absolute;
  width: 183rpx;
  height: 197rpx;
  top: -50rpx;
  right: 45%;
  transform: translate(-30rpx, 30rpx);
  opacity: 0;
  transition: all 0.2s ease;
}

.word-b {
  position: absolute;
  width: 207rpx;
  height: 174rpx;
  left: 45%;
  transition: all 0.2s ease;
  transform: translate(30rpx, -30rpx);
  opacity: 0;
  bottom: 0;
}

.pActive {
  transform: translateX(0rpx);
  opacity: 1;
}

.jActive {
  transform: translateX(0rpx);
  opacity: 1;
}

.bActive {
  transform: translateX(20rpx);
  opacity: 1;
}

// 奖励---------------------
.gift,
.gift-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  transition: all 0.2s ease;
  opacity: 0;
}

.gift {
  color: #777676;
  margin-bottom: 18rpx;
  transform: scale(1.3);
  .g-word {
    padding: 0 15rpx;
  }
  .line {
    width: 118rpx;
    height: 2rpx;
    background: #aaaaaa;
  }
}

.giftActive {
  opacity: 1;
  transform: scale(1);
}

.gift-detail {
  color: #67c29f;
  margin-bottom: 64rpx;
  img {
    width: 48rpx;
    height: 48rpx;
    margin-right: 10rpx;
  }
  .gold {
    margin-right: 80rpx;
  }
  .exp,
  .gold {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.giftDetailActive {
  opacity: 1 !important;
}

//勝利內容
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36rpx;
    font-size: 36rpx;
  }
  .btn-game,
  .btn-back {
    width: 248rpx;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    border-radius: 0.8rem;
    color: #fff;
    font-size: 36rpx;
    transition: all 0.2s ease;
    transform: scale(0);
  }
  .btn-back {
    color: #7d7d7d;
    border: 3rpx solid #dcdcdc;
    margin-left: 78rpx;
  }
  .btnActive {
    transform: scale(1);
  }
  //顏色
.green {
  background-color: #67c29f;
}
</style>
